<template>
  <div class="prcList">
    <Loading v-if="loading"></Loading>
    <div class="info" v-else>
      <table class="listInfo">
        <thead>
          <tr>
            <td>订单id</td>
            <td>交易号</td>
            <td>用户</td>
            <td>收货地址</td>
            <td>总价</td>
            <td>留言</td>
            <td>配送时间</td>
            <td>收货人</td>
            <td>收货人手机</td>
            <td>订单时间</td>
            <td>状态</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in tableData">
            <td>{{index+1}}</td>
            <td>{{item.trade_no}}</td>
            <td>{{item.user.email}}</td>
            <td v-if="item.user_address">{{item.user_address.post_code}},{{item.user_address.address}}</td>
            <td v-else></td>
            <td>{{item.amount}}</td>
            <td>{{item.remark}}</td>
            <td v-if="item.pay_type!=null">{{item.pay_type.type_name}}</td>
            <td v-else></td>
            <td>{{item.order_username}}</td>
            <td>{{item.order_tellphone}}</td>
            <td>{{item.created_at}}</td>
            <td>
              <select @change="changeStart(item)" v-model="item.status">
                <option value="1">未处理</option>
                <option value="2">送货中</option>
                <option value="3">已完成</option>
                <option value="4">已取消</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pageList">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="tableNum" :total="tableCont">
        </el-pagination>
      </div>
  </div>
  </div>
</template>
<script>
import Vue from 'vue'
import Loading from '@/components/loading'
import axios from 'axios'
import { Get, Post ,Put } from '@/config/api'
export default {
  name: 'prcList',
  data() {
    return {
      loading: true,
      tableData: [],
      tableNum: 15, //每页显示多少条
      tableCont: 0, //一共有多少条信息
      tablePage: 1 //当前页码
    }
  },
  filters:{
      state(vule){
        if(vule=='1'){
          return '未处理'
        }else if(vule=='2'){
          return '送货中'
        }else if(vule=='3'){
          return '已完成'
        }else if(vule=='4'){
          return '已取消'
        }
      },
      type(vule){
        if(vule=='4'){
          return '14:00-16:00'
        }else if(vule=='5'){
          return '20:00-22:00'
        }
      }
  },
  mounted() {
    this.getData(1)
  },
  components: {
    Loading
  },
  methods: {
    //获取数据
    async getData(val) {
      let reg=await Get('/order/all?_include=user_address,order_items,user,pay_type&_per_page=15&page='+val,this.$store.state.token)
      this.tableData=reg.data
      this.tableCont=reg.meta.pagination.total
      this.loading=false
    },
    async changeStart(e){
        if (this.Check()) {
          let data={
            "status":e.status
          }
          let reg=await Put('/order/status/'+e.id,this.$store.state.token,data)
        }
    },
    //分页
    handleCurrentChange(val) {
      this.tablePage = val
      this.getData(val)
    }
  }
}

</script>
